<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的订单</title>
<meta name="keywords" content="KEYWORDS..." />
<meta name="description" content="DESCRIPTION..." />
<link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/icon/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="196x196" href="images/icon/apple-touch-icon-196x196-precomposed.png">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/swiper3.07.min.css" />
<style>
.tab {
	top: 0;
}

.my-order-iphone1 {
	margin-top: 4%;
}

.addclasstruenav {
	color: #3acd17;
}
</style>
</head>

<body class="padd_40">
	<div class="tab">
		<a href="javascript:;" class="active">待付款</a>
		<a href="javascript:;">待交付</a>
		<a href="javascript:;">已取消</a>
		<a href="javascript:;">已交付</a>
		<div class="clearfix"></div>
	</div>
	<div class="swiper-container" style="margin-top: -40px;">
		<div class="refreshtip">下拉可以刷新</div>
		<div class="swiper-wrapper w">
			<div class="swiper-slide d">
				<div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div>
				<div class="swiper-container2">
					<div class="swiper-wrapper">
						<div class="swiper-slide list-group">
							<ul>
								<li class="bor-bottom5-f1 bg-fff padb03">
									<div class="order-details-header">
										<div class="order-det-logo fl">
											<img src="img/logo.jpg">
										</div>
										<div class="order-det-time fl">
											<h4>合肥南站店</h4>
											<p>2017-10-12</p>
										</div>
										<div class="my-order-iphone1 fr f032 text-right">
											<h4 class="f029">￥24.50</h4>
											<p class="f02 color999">订单号：20171012678</p>
										</div>
										<div class="clearfix"></div>
									</div>
									<div class="commodity-name f032">
										<ul>
											<li>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
											</li>

											<div class="clearfix"></div>
										</ul>
									</div>
									<div class="bg-fff pay-button-myorder">
										<button class="bg99">取消</button>
										<button class="bg26c400">去付款（还剩3分钟00秒）</button>
									</div>
								</li>

							</ul>

						</div>
						<div class="swiper-slide list-group">
							<ul>
								<li class="bor-bottom5-f1 bg-fff padb03">
									<div class="order-details-header">
										<div class="order-det-logo fl">
											<img src="img/logo.jpg">
										</div>
										<div class="order-det-time fl">
											<h4>合肥南站店</h4>
											<p>2017-10-12</p>
										</div>
										<div class="my-order-iphone1 fr f032 text-right">
											<h4 class="f029">￥24.50</h4>
											<p class="f02 color999">订单号：20171012678</p>
										</div>
										<div class="clearfix"></div>
									</div>
									<div class="commodity-name f032">
										<ul>
											<li>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
											</li>
											<div class="clearfix"></div>
										</ul>
									</div>
								</li>
								<li class="bor-bottom5-f1 bg-fff padb03">
									<div class="order-details-header">
										<div class="order-det-logo fl">
											<img src="img/logo.jpg">
										</div>
										<div class="order-det-time fl">
											<h4>合肥南站店</h4>
											<p>2017-10-12</p>
										</div>
										<div class="my-order-iphone1 fr f032 text-right toggleright">
											<h4 class="f029">￥24.50</h4>
											<p class="f02 color999">订单号：20171012678</p>
										</div>
										<div class="fr toggleButton">
											<img src="img/xial_03.png" />
										</div>
										<div class="clearfix"></div>
									</div>
									<div class="commodity-name f032 toggleCon">
										<ul>
											<li>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
											</li>
											<div class="clearfix"></div>
										</ul>
									</div>
								</li>
							</ul>
						</div>
						<div class="swiper-slide list-group">
							<ul>
								<li class="bor-bottom5-f1 bg-fff">
									<div class="order-details-header">
										<div class="order-det-logo fl">
											<img src="img/logo.jpg">
										</div>
										<div class="order-det-time fl">
											<h4>合肥南站店</h4>
											<p>2017-10-12</p>
										</div>
										<div class="my-order-iphone1 fr f032 text-right">
											<h4 class="f029">￥24.50</h4>
											<p class="f02 color999">订单号：20171012678</p>
										</div>
										<div class="clearfix"></div>
									</div>
									<div class="commodity-name f032">
										<ul>
											<li>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
											</li>

											<div class="clearfix"></div>
										</ul>
									</div>
									<div class="bg-fff pay-button-myorder">
										<button class="bg26c400" onclick="window.location.href='order-settlement.html';">重新下单</button>
									</div>
								</li>

							</ul>
						</div>
						<div class="swiper-slide list-group">
							<ul>
								<li class="bor-bottom5-f1 bg-fff">
									<div class="order-details-header">
										<div class="order-det-logo fl">
											<img src="img/logo.jpg">
										</div>
										<div class="order-det-time fl">
											<h4>合肥南站店</h4>
											<p>2017-10-12</p>
										</div>
										<div class="my-order-iphone1 fr f032 text-right">
											<h4 class="f029">￥24.50</h4>
											<p class="f02 color999">订单号：20171012678</p>
										</div>
										<div class="clearfix"></div>
									</div>
									<div class="commodity-name f032">
										<ul>
											<li>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
												+
												<span>
													商品名称1
													<em>×</em>
													2
												</span>
											</li>

											<div class="clearfix"></div>
										</ul>
									</div>
									<div class="bg-fff pay-button-myorder">
										<button class="bgf58d05" onclick="window.location.href='evaluate.html';">评价</button>
										<button class="bg26c400">再来一单</button>
									</div>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="loadtip">上拉加载更多</div>
		<div class="swiper-scrollbar"></div>
	</div>
	<div style="height: 1.2rem;"></div>
	<nav>
		<a href="index.html" class="homeIcon ">
			<img src="img/index1.png">
			点餐
		</a>
		<a href="my-order.html" class="categoryIcon addclasstruenav">
			<img src="img/index2-1.png">
			订单
		</a>
		<a href="service.html" class="cartIcon numberCount">
			<img src="img/index3.png">
			服务
		</a>
		<a href="about-us.html" class="userIcon">
			<img src="img/index4.png">
			我的
		</a>
	</nav>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			$(document).ready(function(){
			  $(".toggleButton").click(function(){
			  $(".toggleCon").toggle(1000);
			  });
			});
		</script>




	<script type="text/javascript">
			var loadFlag = true;
			var oi = 0;
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				scrollbar: '.swiper-scrollbar',
				slidesPerView: 'auto',
				mousewheelControl: true,
				freeMode: true,
				onTouchMove: function(swiper) { //手动滑动中触发
					var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
					var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;

					if(mySwiper.translate < 50 && mySwiper.translate > 0) {
						$(".init-loading").html('下拉刷新...').show();
					} else if(mySwiper.translate > 50) {
						$(".init-loading").html('释放刷新...').show();
					}
				},
				onTouchEnd: function(swiper) {
					var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
					var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
					// 上拉加载
					if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
						// console.log("已经到达底部！");

						if(loadFlag) {
							$(".loadtip").html('正在加载...');
						} else {
							$(".loadtip").html('没有更多啦！');
						}

						setTimeout(function() {
							for(var i = 0; i < 5; i++) {
								oi++;
								$(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加载出来的' + oi + '...</li>');
							}
							$(".loadtip").html('上拉加载更多...');
							mySwiper.update(); // 重新计算高度;
						}, 800);
					}

					// 下拉刷新
					if(mySwiper.translate >= 50) {
						$(".init-loading").html('正在刷新...').show();
						$(".loadtip").html('上拉加载更多');
						loadFlag = true;

						setTimeout(function() {
							$(".refreshtip").show(0);
							$(".init-loading").html('刷新成功！');
							setTimeout(function() {
								$(".init-loading").html('').hide();
							}, 800);
							$(".loadtip").show(0);

							//刷新操作
							mySwiper.update(); // 重新计算高度;
						}, 1000);
					} else if(mySwiper.translate >= 0 && mySwiper.translate < 50) {
						$(".init-loading").html('').hide();
					}
					return false;
				}
			});
			var mySwiper2 = new Swiper('.swiper-container2', {
				onTransitionEnd: function(swiper) {

					$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
					$('.swiper-container2 .swiper-slide-active').css('height', 'auto').siblings('.swiper-slide').css('height', '0px');
					mySwiper.update();

					$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
				}

			});
			$('.tab a').click(function() {

				$(this).addClass('active').siblings('a').removeClass('active');
				mySwiper2.slideTo($(this).index(), 500, false)

				$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
				$('.swiper-container2 .swiper-slide-active').css('height', 'auto').siblings('.swiper-slide').css('height', '0px');
				mySwiper.update();
			});
		</script>
</body>

</html>